<template>
  <div class="navContentItem">
    <p class="title">{{name}}</p>
    <div class="content">
        <a v-for="i of data" @click="play(i.url)"><div class="div">{{i.name}}</div></a>
    </div>
  </div>
</template>
<script>
export default {
    name:'navContentItem',
    props:{
        data:{
            type:Array,
            default(){
                return []
            }
        },
        name:{
            type:String,
            default:"未知"
        }
    },
    data(){
        return {
        }
    },
    methods: {
        play(v){
            window.open(v)
        }
    },
}
</script>
<style scoped>
.navContentItem{
    width: 100%;
}
.title{
    width: 100%;
    font-size: 20px;
    text-align:center;
    margin: 10px 0;
}
.content{
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-around;  
align-items: center; 
margin-bottom:40px ;
}

.content a{
    display: block;
    width: 32%;
    box-sizing: border-box;
    height: 40px;
    line-height: 40px;
    background: rgba(0, 0, 0,   0.418);
    text-align: center;
    margin: 2px 0;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.712);
    
}
.content a:hover div{
    color: #fff;
    transition: 0.2s;
    transform: scale(1.2);
}
</style>